<template>
  <view class="tabBottom" :style="{height: `${scrollHeight}px`}">
    <view class="tabs" id="subTab">
      <view :class="['tabItem', state.tabId === item.id ? 'tabsItemHover' : '']" v-for="(item, index) in tabs3" :key="index" @click="changeTab(item)">
        {{item?.name}}
      </view> 
       <view :class="['tab2Item', state.subTabId === item.id ? 'tab2ItemHover' : '']" v-for="(item,index) in tabs4" :key="index" @click="changeTab2(item)">
         {{item?.name}}
       </view>
    </view>
    <scroll-view class="orderList" scroll-y v-if="state.tabId == 1" :style="{height: `${calculateHeight}px`}"  @scrolltolower="loadMoreData">
      <view :class="['orderListItem', item?.biaohong == 1 ? 'orderListHover' : '']" v-for="(item, index) in state.orderList?.list"  :key="index">
        <view class="left">
          <view class="title">
            <text>{{item?.order_no}}</text>
            <text class="text02">{{item?.name}}</text>
          </view>
          <view class="desc">
            技术需求：
            <view class="span">{{item?.software_ask_one}}</view>
            <view class="span">{{item?.software_ask_two}}</view>
            <view class="span">{{item?.software_ask_three}}</view>
          </view>
          <view class="date">
            <view class="span">开题时间:{{item?.middle_date ? moment(item?.middle_date * 1000).format('YYYY-MM-DD') : null}}</view>
            <view class="span">定稿时间:{{item?.end_date ? moment(item?.end_date * 1000).format('YYYY-MM-DD') : null}} </view>
          </view>
          <view class="teacher" @click="editTeacher(item, index)">
            <image :src="item?.head_img"></image>
            <view class="teaRight">
              <view class="top">
                <view class="span">老师</view>
                <view class="span">价格</view>
              </view>
              <view class="teaBottom">
                <view class="span">
                  {{item?.nick_name || '选择老师'}}
                </view>
                <view class="span">{{item?.price}}</view>
              </view>
              
            </view>
          </view> 
        </view>
        <view class="right">
          <view class="price">{{item?.send_price}}</view>
          <view class="btn" @click="orderSubmit(item)">确认</view>
        </view>
      </view>
    </scroll-view>
    <scroll-view class="orderList orderListAll" scroll-y v-if="state.tabId == 2" :style="{height: `${calculateHeight}px`}"  @scrolltolower="loadMoreData">
      <view :class="['newOrderListItem', item?.biaohong == 1 ? 'orderListHover' : '']" v-for="(item, index) in state.allOrderInfo?.list" :key="index">
        <view class="newTop">
          <view class="left">
            <view class="title">
              <text>{{item?.order_no}}</text>
              <text class="text02">{{item?.name}}</text>
            </view>
            <view class="desc">
              技术需求：
              <view class="span">{{item?.software_ask_one}}</view>
              <view class="span">{{item?.software_ask_two}}</view>
              <view class="span">{{item?.software_ask_three}}</view>
            </view>
            <view class="date">
              <view class="span">开题:{{item?.middle_date ? moment(item?.middle_date * 1000).format('YYYY-MM-DD') : null}}</view>
              <view class="span">定稿:{{item?.end_date ? moment(item?.end_date * 1000).format('YYYY-MM-DD') : null}} </view>
            </view>
            <view class="teacher" @click="editTeacher(item, index)">
              <image :src="item?.head_img"></image>
              <view class="teaRight">
                <view class="top">
                  <view class="span">老师</view>
                  <view class="span">价格</view>
                </view>
                <view class="teaBottom">
                  <view class="span span02">
                    {{item?.nickname}}
                  </view>
                  <view class="span">
                    <text>{{item?.teacher_yet_price}}</text>
                    <view class="line"></view>
                    <text>{{item?.teacher_price}}</text>
                  </view>
                </view> 
              </view>
            </view> 
          </view>
          <view class="right">
            <view class="newPrice">
              <text>价格: {{item?.send_price}}</text>
              <text>已结款: {{item?.yet_send_price}}</text>
            </view>
            <view class="btn"  @click="clickZhuanBtn(item, index)">转派</view>
          </view> 
        </view>
        <view class="dashedLine"></view>
        <view class="newBottom">
          <view class="easyInput">
            <picker mode="date" :value="item?.clock_date" @change="bindItemPicker($event, index, item.id)">
              <view class="uni-input" v-if="item?.clock_date">{{item?.clock_date}}</view>
              <view class="uni-input placeholder" v-else>请选择时间</view>
            </picker>
            <!-- <uni-easyinput value="2025.05.24" :clearable="false" :styles="styles"/> -->
          </view>
          <view class="inputRight">
            <view class="inputItem">
              <text>初稿</text>
              <view class="status">
                <view :class="['span', item.status >= 3 ? 'spanHover' : ''] "></view>
              </view>
            </view>
            <view class="inputItem">
              <text>修改</text>
              <view class="status">
                <view :class="['span', item.status >= 4 ? 'spanHover' : ''] "></view>
                <view :class="['span', item.status >= 5 ? 'spanHover' : ''] "></view>
                <view :class="['span', item.status >= 6 ? 'spanHover' : ''] "></view>
                <view :class="['span', item.status >= 7 ? 'spanHover' : ''] "></view>
              </view>
            </view>
            <view class="inputItem">
              <text>降重</text>
              <view class="status">
                <view :class="['span', item.status >= 8 ? 'spanHover' : ''] "></view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
  <uni-popup ref="orderPopup">
    <view class="pop-content">
      <uni-icons type="close" size="30" class="icons" color="rgba(254, 34, 34, 1)" @click="orderClosePop"></uni-icons>
      <view class="title">
        {{state.currentOrderItem?.order_no}} {{state.currentOrderItem?.name}}
      </view>
      <view class="popForm">
        <uni-forms
          v-model="state.formData"
          ref="formRef"
          :rules="rules"
          validateTrigger="bind"
          :label-width="80"
          label-align="right"
          :labelStyle="{ fontWeight: 'bold'}"
        >
          <uni-forms-item required name="teacherId" label="老师:" >
            <view class="uni-input" v-if="state.formData.teacher_id" @click="showTeacher">{{state.currentTeacher?.nickname}}</view>
            <view class="uni-input placeholder" v-else @click="showTeacher">选择老师 <uni-icons type="search" size="30" style="margin-left: 90rpx" color="rgba(155, 155, 155, 1)"></uni-icons></view>
            <!-- <uni-easyinput type="number" placeholder="搜索" suffix-icon="search" disabled="true" @click="showTeacher" /> -->
          </uni-forms-item>
          <uni-forms-item required name="date" label="时间:">
            <picker mode="date" :value="state.formData?.clock_date" @change="bindEndPicker">
              <view class="uni-input" v-if="state.formData?.clock_date">{{state.formData?.clock_date}}</view>
              <view class="uni-input placeholder" v-else>请选择时间</view>
            </picker>
          </uni-forms-item> 
          <uni-forms-item required name="price" label="价格:">
            <uni-easyinput v-model="state.formData.price"></uni-easyinput>
          </uni-forms-item> 
        </uni-forms>
      </view> 
      <view class="submit" @click="submitTeacher">确认</view>
    </view>
  </uni-popup>
  <uni-popup ref="childPopup" type="center">
    <view class="popup-content">
      <view class="search">
        <uni-easyinput placeholder="搜索老师" class="uni-input" @change="searchTeacher"/>
      </view>
      
      <view class="studentList">
        <view class="studentItem" v-for="(item, index) in state.teacherList" :key="index" @click="clickTeacher(item)">
          <image :src="item?.head_img"/>
          <view class="right">
            <view class="h3">{{item?.nickname}}</view>
            <view class="p">ID:{{item?.id}}</view> 
          </view> 
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
  import { tabs3, tabs4 } from '../data.js'
  import { ref, reactive, watch, computed, defineEmits, defineProps, onMounted } from 'vue'
  import { onShow } from '@dcloudio/uni-app'
  import moment from 'moment'
  import { sendOrder, getTeacherList, teacherSendAgainOrder, adminEditClock } from '@/utils/admin.js'
  
  const orderPopup = ref(null)
  const formRef = ref(null)
  const childPopup = ref(null)
  const rules = {
    teacher_id: {
      rules: [
        {
          required: true,
          errorMessage: "请选择老师"
        }
      ]
    },
    clock_date: {
      rules: [
        {
          required: true,
          errorMessage: "请选择时间"
        }
      ]
    },
    price: {
      rules: [{
        require: true,
        errorMessage: '请输入价格'
      }]
    }
  };
  const state = reactive({
    tabId: 1,
    subTabId: 1,
    formData:{
      teacher_id: null,
      clock_date: null,
      price: null
    },
    orderList: [],
    allOrderInfo: [],
    teacherList: [],
    currentOrderItem: {},
    currentTeacher: {},
    currentIndex: null,
    page: 1,
    allPage: 1
  })
  const emits = defineEmits(['sendList', 'getAllList'])
  const props = defineProps({
    orderList: {
      type: Object,
      default: () =>  {}
    },
    allOrderInfo: {
      type: Object,
      default: () => {} ,    
    },
    scrollHeight:{
      type: Number,
      default: () => 0
    }
  }) 
  watch(
    () => props.orderList,
    () => {
      if (props.orderList) {
        state.orderList = props.orderList
      }
    }
  )
  watch(
    () => props.allOrderInfo,
    () => {
      if (props.allOrderInfo) {
        state.allOrderInfo = props.allOrderInfo
        console.log(326, props.allOrderInfo)
      }
    }
  )
  onShow(() => {
    emits('sendList', {tabId: state.subTabId, page: 1})   
  })
  // 计算剩余高度的函数
  const calculateHeight = computed(() => {
    return props.scrollHeight - 70;
  });
  // 
  const orderClosePop = () => {
    orderPopup.value.close()
  }
  // 修改锁钟日期
  const bindEndPicker = (e) => {
    state.formData.clock_date = e?.detail?.value
  }
  const bindItemPicker = (e, subIndex, id)=> {   
    adminEditClock({id: id, clock_date: e?.detail?.value}).then((res) => {
      if (res?.code == 1) {
        emits('getAllList', {tabId: state.subTabId, page: state.allPage})
      }
    })
  }
  // 选择老师
  const clickTeacher = (item) => {
    state.currentTeacher = item
    state.formData.teacher_id = item.id
    childPopup.value.close()
  }
  // 获取老师列表
 const getTeacherFun = (value) => {
    getTeacherList({search: value, page: 1, limit: 100}).then((res) => {
      if (res?.code == 1) {
        state.teacherList = res?.result?.list
      }
    })
  }
  const searchTeacher = (e) => {
    getTeacherFun(e || '')
  }
  // 所有订单--点击转派
  const clickZhuanBtn = (item, index) => {
    state.currentOrderItem = item
    state.currentIndex = index
    getTeacherFun("")
    orderPopup.value.open()
  }
  
  // 待结款订单点击确认
  const orderSubmit = async(item) => {
    let params = {
      id: item?.id,
      ...state.formData
    }
    await sendOrder(params).then((res) => {
      if (res?.code == 1) {
        emits('sendList', {tabId: state.subTabId, page: 1})
      } 
    })
  }
  // 输入框样式
  const styles = {
    borderColor: "2rpx solid rgba(168, 168, 168, 1)"
  }
  const changeTab = (item) => {
    state.tabId = item.id
    state.subTabId = 1
    if (item?.id == 1) {
      emits('sendList', {tabId: state.subTabId, page: 1})
    } else {
      emits('getAllList', {tabId: state.subTabId, page: 1})
    }
  }
  // 分页加载数据
  const loadMoreData = () => {
    if (state.tabId == 1) {
      // 模拟请求数据
      setTimeout(() => { 
        state.page ++
        const pageNum = props.orderList?.total / 20
        // 假设第 3 页是最后一页
        if (state.page > pageNum) {
          // this.hasMore = false; // 没有更多数据
        } else {
          emits('sendList', {tabId: state.subTabId, page: state.page})
        }
      }, 1000);
    } else {
      // 模拟请求数据
      setTimeout(() => { 
        state.allPage ++
        const pageNum = props.allOrderInfo?.total / 20
        if (state.allPage > pageNum) {
        } else {
          emits('getAllList', {tabId: state.subTabId, page: state.allPage})
        }
      }, 1000);
    }  
  }
  
  // 切换tab刷新数据
  const changeTab2 = (item) => {
    state.subTabId = item.id
    if (state.tabId == 1) {
      emits('sendList', {tabId: state.subTabId, page: 1})
    } else {
      emits('getAllList', {tabId: state.subTabId, page: 1})
    }
  }
  //点击老师头像修改老师
  const editTeacher = (item, index) => {
    state.currentIndex = index
    getTeacherFun("")
    orderPopup.value.open()
  }
  const submitTeacher = () => {
    let head_img = state.currentTeacher?.head_img
    let nick_name= state.currentTeacher?.nickname
    let price = state.formData.price
    let params = {
      head_img,
      nick_name,
      price
    }
    if (state.tabId == 1) {
      state.orderList.list[state.currentIndex] = {...state.orderList?.list[state.currentIndex], ...params};
    } else if (state.tabId == 2) {
      state.allOrderInfo.list[state.currentIndex] = {...state.allOrderInfo?.list[state.currentIndex], ...params};
      let sendParams = {
        ...state.formData,
        id: state.currentOrderItem?.id
      }
      console.log(342, sendParams)
      teacherSendAgainOrder(sendParams).then((res) => {
        console.log(343, res)
        if(res?.code == 1){
          emits('getAllList', {tabId: state.subTabId, page: 1})
        }
      })
    }
    
    orderPopup.value.close()
  }
  // 点击搜索老师
  const showTeacher = () => {
    childPopup.value.open()
  }
</script>

<style lang="scss" scoped>
  .tabBottom{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 750rpx;
    .tabs{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin-top: 40rpx;
      padding-bottom: 10rpx;
      border-bottom: 2rpx solid rgba(65, 65, 65, 1);
      width: 698rpx;
      .tabItem{
        height: 48rpx;
        border-radius: 6rpx;
        background: rgba(209, 218, 243, 1);
        border: 2rpx solid rgba(122, 122, 122, 1);
        font-family: HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 40rpx;
        padding:10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left:20rpx;
        margin-right:20rpx;
      }
      .tabsItemHover{
        color: rgba(11, 105, 218, 1);
      }
      .tab2Item{
        width: 64rpx;
        height: 34rpx;
        border-radius: 6rpx;
        background: rgba(209, 218, 243, 1);
        border: 2rpx solid rgba(111, 114, 116, 1);
        font-family: HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 24rpx;
        color: rgba(111, 114, 116, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20rpx;
      }
      .tab2ItemHover{
        background: rgba(209, 218, 243, 1);
        border: 2rpx solid rgba(11, 105, 218, 1);
        color: rgba(11, 105, 218, 1);
      }
    }
    .orderList{
      width: 100%;
      height: calc(100vh - 800rpx);
      .orderListItem{
        width: 650rpx;
        // height: 194rpx;
        border-radius: 6rpx;
        background: rgba(209, 243, 241, 1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        margin-top:30rpx;
        padding-bottom: 20rpx;
        .left{
          width: 466rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-left:20rpx;
          .title{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: flex-start;
            margin-top: 20rpx;
            text{
              font-family: HarmonyOS Sans SC;
              font-weight: 400;
              font-size: 20rpx;
              color: rgba(60, 60, 60, 1);
            }
            .text02{
              margin-left: 20rpx;
            }
          }
          .desc{
            width: 436rpx;
            height: 34rpx;
            border-radius:14rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 16rpx;
            color: rgba(60, 60, 60, 1);
            background: rgba(247, 247, 247, 1);
            margin-bottom: 20rpx;
            margin-top: 20rpx;
            padding-left: 30rpx;
            .span{
              margin-right: 30rpx;
            }
          }
          .date{
            width: 436rpx;
            height: 34rpx;
            display: flex;
            flex-direction: row;
            margin-bottom: 20rpx;
            justify-content: space-between;
            .span{
              font-size: 24rpx;
              color: red;
            }
          }
          .teacher{
            width: 446rpx;
            height: 94rpx;
            border-radius: 14rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            background: rgba(247, 247, 247, 1);
            image{
              width: 76rpx;
              height: 76rpx;
              border: 1px dashed rgba(0, 0, 0, 1);
              background: rgba(217, 217, 217, 0.61);
              margin-left:30rpx;
              border-radius: 100%;
            }
            .teaRight{
              width: 300rpx;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              margin-right: 20rpx;
              .top{
                width: 100%;
                display: flex;
                flex-direction: row;
                border-bottom: 2rpx dashed rgba(146, 146, 146, 1);
                .span{
                  width: 50%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  font-family: HarmonyOS Sans SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: rgba(60, 60, 60, 0.91);
                }
              }
              .teaBottom{
                width: 100%;
                display: flex;
                flex-direction: row;
                // border-bottom: 2rpx dashed rgba(146, 146, 146, 1);
                .span{
                  width: 50%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  color: rgba(60, 60, 60, 0.53);
                  font-family: HarmonyOS Sans SC;
                  font-weight: 400;
                  font-size: 28rpx;

                }
              }
            }
            
          }
        }
        .right{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-right: 30rpx;
          .price{
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 32rpx;
            color: rgba(60, 60, 60, 1);
          }
          .btn{
            width: 98rpx;
            height: 56rpx;
            border-radius: 10rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(135, 255, 124, 1);
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 30rpx;
            color: rgba(83, 83, 83, 1);
            margin-top: 50rpx;
          }
        }
      }
    }
    .orderListAll{
      width: 100%;
      height: calc(100vh - 860rpx);
      overflow-y: scroll;
      .newOrderListItem{
        width: 650rpx;
        border-radius: 6rpx;
        margin: 0 auto;
        background: rgba(209, 243, 241, 1);
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: center;
        margin-top:30rpx;
        padding-bottom: 20rpx;
        .newTop{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          width: 100%;
        }
        .dashedLine{
          width: 520rpx;
          border-bottom: 2rpx dashed rgba(146, 146, 146, 1);
          margin-top: 30rpx;
        }
        .left{
          width: 466rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-left:20rpx;
          .title{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: flex-start;
            margin-top: 20rpx;
            text{
              font-family: HarmonyOS Sans SC;
              font-weight: 400;
              font-size: 20rpx;
              color: rgba(60, 60, 60, 1);
            }
            .text02{
              margin-left: 20rpx;
            }
          }
          .desc{
            width: 436rpx;
            height: 34rpx;
            border-radius:14rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 16rpx;
            color: rgba(60, 60, 60, 1);
            background: rgba(247, 247, 247, 1);
            margin-bottom: 20rpx;
            margin-top: 20rpx;
            padding-left: 30rpx;
            .span{
              margin-right: 30rpx;
            }
          }
          .date{
            width: 436rpx;
            height: 34rpx;
            display: flex;
            flex-direction: row;
            margin-bottom: 20rpx;
            justify-content: space-between;
            .span{
              font-size: 24rpx;
              color: red;
            }
          }
          .teacher{
            height: auto;
            padding-top: 10rpx;
            padding-bottom: 10rpx;
            width: 446rpx;
            border-radius: 14rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            background: rgba(247, 247, 247, 1);
            image{
              width: 76rpx;
              height: 76rpx;
              border: 1px dashed rgba(0, 0, 0, 1);
              background: rgba(217, 217, 217, 0.61);
              margin-left:30rpx;
              border-radius: 100%;
            }
            .teaRight{
              width: 300rpx;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              margin-right: 20rpx;
              .top{
                width: 100%;
                display: flex;
                flex-direction: row;
                border-bottom: 2rpx dashed rgba(146, 146, 146, 1);
                .span{
                  width: 50%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  font-family: HarmonyOS Sans SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: rgba(60, 60, 60, 0.91);
                }
              }
              .teaBottom{
                width: 100%;
                display: flex;
                flex-direction: row;
                // border-bottom: 2rpx dashed rgba(146, 146, 146, 1);
                .span{
                  width: 50%;
                  color: rgba(60, 60, 60, 0.53);
                  font-family: HarmonyOS Sans SC;
                  font-weight: 400;
                  font-size: 28rpx;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  text{
                    font-family: HarmonyOS Sans SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: rgba(60, 60, 60, 0.53);
                  }
                  .line{
                    width: 78rpx;
                    border-bottom: 2rpx solid rgba(0, 0, 0, 1);
                    margin-top:4rpx;
                    margin-bottom: 4rpx;
                  }
                }
                .span02{
                  display: block; 
                  line-height: 78rpx;
                  text-align: center;
                  height:78rpx;
                }
              }
            }
            
          }
        }
        .right{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-right: 30rpx;
          .newPrice{
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;
            font-size: 20rpx;
            color: rgba(60, 60, 60, 1);
          }
          .btn{
            width: 98rpx;
            height: 56rpx;
            border-radius: 10rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(135, 255, 124, 1);
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 30rpx;
            color: rgba(83, 83, 83, 1);
            margin-top: 50rpx;
          }
        }
        .newBottom{
          width: 586rpx;
          height: 90rpx;
          border-radius: 14rpx;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          background: #ffffff;
          margin-top: 30rpx;
          .easyInput{
            width: 190rpx;
            margin-left: 20rpx;
            border: 2rpx solid rgba(168, 168, 168, 1);
            .uni-input{
              // width: 300rpx;
              // height:76rpx;
              // border: 2rpx solid rgba(0, 0, 0, 1);
              text-align: center;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 28rpx;
              // margin-top:30rpx;
            }
            .placeholder{
              color: rgba(163, 163, 163, 1);
            }
            // .uni-easyinput__content-input{
            //   padding-left: 3rpx !important;
            //   padding-right: 3rpx !important;
            // }
          }
          .inputRight{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-right: 30rpx;
            .inputItem{
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              margin-right: 20rpx;
              text{
                font-family: HarmonyOS Sans SC;
                font-weight: 400;
                font-size: 24rpx;
                color: rgba(122, 122, 122, 1);
              }
              .status{
                display: flex;
                flex-direction: row;
                align-items: center;
                .span{
                  width: 28rpx;
                  height: 26rpx;
                  border-radius: 6rpx;
                  border: 1px solid rgba(11, 105, 218, 1);
                  background: none;
                  margin-right:6rpx;
                }
                .spanHover{
                  background: rgba(28, 246, 21, 1);
                }
              }
            }
          }
        }
      }
      .orderListHover{
        background: rgba(255, 126, 90, 1); 
      }
    }
  }
  // 第一个弹窗
  .pop-content{
    width: 612rpx;
    height: 600rpx;
    border-radius: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background:#ffffff;
    flex-direction: column;
    position: relative;
    padding-bottom: 30rpx;
    .icons{
      position: absolute;
      right: 30rpx;
      top: 20rpx;
    }
    .title{
      font-family: HarmonyOS Sans SC;
      font-weight: 400;
      font-size: 20rpx;
      text-align: center;
      color: rgba(60, 60, 60, 1);
      margin-top: 30rpx;
    }
    .popForm{
      width: 500rpx;
      display: flex;
      flex-direction: column;
      margin-top: 40rpx;
      
      .uni-input{
        // width: 300rpx;
        height:76rpx;
        border: 2rpx solid rgba(0, 0, 0, 1);
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;
        // margin-top:30rpx;
      }
      .placeholder{
        color: rgba(163, 163, 163, 1);
      }
    }
    .submit{
      width: 98rpx;
      height: 56rpx;
      border-radius: 10rpx;
      background: rgba(135, 255, 124, 1);
      font-family: HarmonyOS Sans SC;
      font-weight: 400;
      font-size: 30rpx;
      color: rgba(83, 83, 83, 1);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .popup-content{
    width: 668rpx;
    height: 710rpx;
    border: 2rpx solid rgba(0, 0, 0, 1);
    background: #ffffff;
    box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .search{
      width: 350rpx;
      // height: 58rpx;
      border-radius: 10rpx;
      border: 2rpx solid rgba(0, 0, 0, 1);
      margin-top: 20rpx;
      .uni-input{
        width: 100%;
        height: 100%
      }
    }
    .studentList{
      display: flex;
      flex-direction: column;
      align-items: center;
      .studentItem{
        width: 612rpx;
        height: 142rpx;
        border-radius: 14rpx;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        background: rgba(247, 247, 247, 1);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        margin-top: 20rpx;
        image{
          width: 102rpx;
          height: 102rpx;
          border-radius: 100%;
          background: #ffffff;
          margin-left: 30rpx;
        }
        .right{
          display: flex;
          flex-direction: column;
          margin-left: 20rpx;
          .h3{
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 32rpx;
            color: rgba(70, 70, 70, 1);
          }
          .p{
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: rgba(169, 169, 169, 1);
            margin-top: 10rpx;
          }
        }
      }
    }
  }
</style>